﻿
var Drag = {
	obj : null,

	init : function(o, minX, maxX)
	{
	  o.onmousedown	= Drag.start;
	  if ( isNaN(parseInt(o.style.left))) o.style.left   = "0px";
	  o.minX	= typeof minX != 'undefined' ? minX : null;
	  o.maxX	= typeof maxX != 'undefined' ? maxX : null;
	  o.onDragStart = new Function();
	  o.onDragEnd	  = new Function();
	  o.onDrag	  = new Function();
	},

	start : function(e)
	{
	  var o = Drag.obj = this;
	  e = Drag.fixE(e);
	  var x = parseInt(o.style.left);
	  o.onDragStart(x);
	  o.lastMouseX = e.clientX;
	  if (o.minX != null)	o.minMouseX	= e.clientX - x + o.minX;
	  if (o.maxX != null)	o.maxMouseX	= o.minMouseX + o.maxX - o.minX;
	  document.onmousemove	= Drag.drag;
	  document.onmouseup		= Drag.end;
	  return false;
	},

	drag : function(e)
	{
	  e = Drag.fixE(e);
	  var o = Drag.obj;
	  var ex	= e.clientX;
	  var x = parseInt(o.style.left);
	  var nx;
	  if (o.minX != null) ex = Math.max(ex, o.minMouseX);
	  if (o.maxX != null) ex = Math.min(ex, o.maxMouseX);
	  nx = x + (ex - o.lastMouseX) ;

	  Drag.obj.style["left"] = nx + "px";
	  Drag.obj.lastMouseX	= ex;
	  Drag.obj.onDrag(nx);
	  return false;
	},

	end : function()
	{
	  document.onmousemove = null;
	  document.onmouseup   = null;
	  Drag.obj.onDragEnd(parseInt(Drag.obj.style["left"]));
	  Drag.obj = null;
	},

	fixE : function(e)
	{
	  if (typeof e == 'undefined') e = window.event;
	  if (typeof e.layerX == 'undefined') e.layerX = e.offsetX;
	  return e;
	}
};

var offset = -150;
var min = 800;
var max = 2200;

function ToPixels(miliSeconds) {
  return (miliSeconds/5) + offset;
}

function ToMiliSeconds(pixels) {
  return (pixels - offset) *5;
}

function sendAsForm(key,val) {
	document.getElementById("key").value = key;
	document.getElementById("value").value = val;
	document.getElementById("ServoChangeForm").submit();
}

function attachEvents() 
{
  for (var i=0; i < 21; i++) 
  {
    var servoNode = document.getElementById("Servo-" + i);
    if (servoNode != null) 
    {
      for(var c=0; c < servoNode.children.length; c++) 
      {
        if (servoNode.children[c] != null)
        {
          switch(servoNode.children[c].className) 
          {
            case "Min":
              Drag.init(servoNode.children[c],ToPixels(800),ToPixels(2200));
              servoNode.children[c].onDragEnd = function(x) {
                this.innerText = ToMiliSeconds(x);
                sendAsForm(this.id, this.innerText);
                var parts = this.id.split('-');
                var s =  parts[1];
                Drag.init(document.getElementById("Position-" + s),
                ToPixels(parseInt(this.innerText,10)),
                ToPixels(parseInt(document.getElementById("Max-"+s).innerText,10)));
                document.getElementById("Position-" + s).onDragEnd = function(x) {
                  this.innerText = ToMiliSeconds(x);
                  sendAsForm(this.id, this.innerText);
                }
              }
              break;
            case "Max":
              Drag.init(servoNode.children[c],ToPixels(min),ToPixels(max));
              servoNode.children[c].onDragEnd = function(x) {
                this.innerText = ToMiliSeconds(x);
                sendAsForm(this.id, this.innerText);
                var parts = this.id.split('-');
                var s =  parts[1];
                Drag.init(document.getElementById("Position-" + s),
                ToPixels(parseInt(document.getElementById("Min-"+s).innerText,10)),
                ToPixels(parseInt(this.innerText,10)));
                document.getElementById("Position-" + s).onDragEnd = function(x) {
                  this.innerText = ToMiliSeconds(x);
                  sendAsForm(this.id, this.innerText);
                }
              }
              break;
            case "Position":
              Drag.init(servoNode.children[c],
              ToPixels(parseInt(document.getElementById("Min-"+i).innerText,10)),
              ToPixels(parseInt(document.getElementById("Max-"+i).innerText,10)));
              servoNode.children[c].onDragEnd = function(x) {
              this.innerText = ToMiliSeconds(x);
              sendAsForm(this.id, this.innerText);
              }
              break;
            default: break;
          }
        }
      }
    }
  }
}